<template>
  <view class="search">
    <view>
      <image src="@/static/image/3.png" mode="widthFix" />
      <input
        v-model="searchValue"
        type="text"
        placeholder="请输入用户名称"
        confirm-type="search"
        @blur="blurFn"
        @focus="focusFn"
        @confirm="confirmInput"
        @input="onSearchInput"
      />
      <up-icon
        v-if="searchValue"
        @tap="
          searchValue = '';
          onSearchInput();
        "
        name="close-circle-fill"
      ></up-icon>
    </view>
    <view @tap="confirmInput">搜索</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits();
const searchValue = ref<string>("");

// 监听内容
const onSearchInput = () => {
  emit("update:searchValue", searchValue.value);
};

// 点击确认
const confirmInput = () => {
  emit("confirmInput", searchValue.value);
};

// 失去焦点
const blurFn = () => {
  emit("blurFn");
};

// 获取焦点
const focusFn = () => {
  emit("focusFn");
};
// 清空 searchValue 的方法
const clearSearchValue = () => {
  searchValue.value = "";
};

defineExpose({
  searchValue,
  clearSearchValue,
});
</script>
